<template>
  <g>
    <polygon :points="points"></polygon>
    <circle cx="100" cy="100" r="80"></circle>
    <axis-label
      v-for="(stat, index) in stats"
      :stat="stat"
      :index="index"
      :total="stats.length">
    </axis-label>
  </g>
</template>

<script>
import AxisLabel from './axislabel'
const { valueToPoint } = require('./helper')
export default {
  components: {
    AxisLabel
  },
  props: ['stats'],
  computed: {
    // a computed property for the polygon's points
    points: function () {
      var total = this.stats.length
      return this.stats.map(function (stat, i) {
        var point = valueToPoint(stat.value, i, total)
        return point.x + ',' + point.y
      }).join(' ')
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus"></style>
